<template>
    <div class="commission-log">
        <div class="ls-card">
            <el-alert title="温馨提示：查看会员佣金钱包资金变动记录。" type="info" :closable="false" show-icon>
            </el-alert>
            <div class="journal-search m-t-16">
                <el-form ref="formRef" inline :model="form" label-width="70px" size="small" class="ls-form">
                    <el-form-item label="关键词">
                        <el-input v-model="form.keyword" placeholder=""> </el-input>

                    </el-form-item>
                    <el-form-item label="记录时间">
                        <el-date-picker
                            v-model="form.date"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :picker-options="pickerOptions"

                            value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>

                    <el-button size="small" type="primary" @click="getList(1)">查询</el-button>
                    <el-button size="small" @click="onReset">重置</el-button>
                    <!-- 导出按钮 -->
                </el-form>
            </div>
        </div>
        <!-- 提现记录表 -->
        <div class="ls-withdrawal__centent ls-card m-t-16">
            <div class="list-table m-t-16">
                <el-table
                    :data="pager.lists"
                    style="width: 100%"
                    v-loading="pager.loading"
                    size="mini"
                    :header-cell-style="{ background: '#f5f8ff' }"
                >
                    <el-table-column prop="order_sn" label="订单编号"> </el-table-column>
                    <el-table-column prop="mobile" label="用户手机"> </el-table-column>
                    <el-table-column prop="nickname" label="用户昵称"> </el-table-column>
                    <el-table-column prop="level_name" label="用户等级"> </el-table-column>
                    <el-table-column prop="direct_nickname" label="我的直推用户昵称"> </el-table-column>
                    <el-table-column prop="integral" label="积分"></el-table-column>
                    <el-table-column prop="value_added" label="价值"></el-table-column>
                    <el-table-column prop="type_text" label="类型"></el-table-column>
                    <el-table-column prop="integral_ratio" label="利率(%)"></el-table-column>
                    <el-table-column prop="create_time" label="记录时间"> </el-table-column>
                </el-table>
            </div>
            <div class="flex row-right m-t-16 row-right">
                <ls-pagination v-model="pager" @change="getList()" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import {
    apiAccountLog,
    apiComType, apiIntegralPool,
} from '@/api/finance/finance'
import { RequestPaging } from '@/utils/util'
import LsPagination from '@/components/ls-pagination.vue'
import ExportData from '@/components/export-data/index.vue'
@Component({
    components: {
        LsPagination,
        ExportData
    }
})
export default class AccountLog extends Vue {
    // 日期选择器
    pickerOptions = {
        shortcuts: [
            {
                text: '最近一周',
                onClick(picker: any) {
                    const end = new Date()
                    const start = new Date()
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                    picker.$emit('pick', [start, end])
                }
            },
            {
                text: '最近一个月',
                onClick(picker: any) {
                    const end = new Date()
                    const start = new Date()
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                    picker.$emit('pick', [start, end])
                }
            },
            {
                text: '最近三个月',
                onClick(picker: any) {
                    const end = new Date()
                    const start = new Date()
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                    picker.$emit('pick', [start, end])
                }
            }
        ]
    }
    /** S Data **/
    tableData = []
    // 顶部查询表单
    pager: RequestPaging = new RequestPaging()
    infoType = '' // 选择用户编号0 选择用户昵称1 手机号码2
    // 顶部查询表单
    form = {
        keyword:'',
        date:[],


    }
    // 变动类型数据
    changeTypeList = []
    // 结算类型数据
    settlementTypeList = []
    settlementStatusList = []

    apiAccountLog = apiAccountLog
    /** E Data **/

    // 监听用户信息查询框条件
    @Watch('infoType', {
        immediate: true
    })
    getChange(val: any) {
        // 初始值
        this.form.keyword = ''
        this.form.date = []
    }

    /** S Methods **/
    splitTime() {
        // if (this.tableData != null) {
        //     this.form.start_time = this.tableData[0]
        //     this.form.end_time = this.tableData[1]
        // }
    }
    // 重置
    onReset() {
        this.form = {
            keyword:'',
            date:[],
        }
        this.tableData = []

        this.getList()
    }
    // 资金记录
    getList(page?: number): void {
        page && (this.pager.page = page)
        this.pager
            .request({
                callback: apiIntegralPool,
                params: {
                    ...this.form
                }
            })
            .then((res: any) => {})
    }

    // 变动类型数据
    getSearchList() {
        apiComType().then((res: any) => {
            this.changeTypeList = res
        })
    }
    /** S Life Cycle **/
    created() {
        this.getList()
        this.getSearchList()
    }
    /** E Life Cycle **/
}
</script>

<style lang="scss" scoped></style>
